<!-- 前端小工具 -->
<template>
 <div>

   <h1>前端小工具</h1>
   
   <div class="box">
     <ContentTitle title="字母大小写转换"></ContentTitle>
     <div>例：abc -> ABC</div>
     <div class="num-box">
       <a-input placeholder="请输入英文字母" v-model="letter" @change="letterChange" />
       <div style="margin-top: 10px;">小写：{{lowerCase}}</div>
       <div style="margin-top: 10px;">大写：{{capital}}</div>
     </div>
   </div>

 </div>
</template>

<script>

export default {
  mounted() {},
  computed: {},
  data() {
    return {
      letter: null,
      lowerCase: null,
      capital: null,
    };
  },
  methods: {
    letterChange() {
      this.lowerCase = this.letter.toLowerCase();
      this.capital = this.letter.toUpperCase();
    },
  },
};
</script>

<style lang='less' scoped>
</style>
